<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>优惠券详情</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>
      <el-form ref="addform" :model="addform" label-width="120px" size="small">
        <el-form-item label="类型：">
          {{addform.couponType | couponType}}
        </el-form-item>

        <el-form-item v-if="addform.couponType == 1" label="折扣比例：">
          {{addform.discount}}%
        </el-form-item>
        <el-form-item v-if="addform.couponType == 2" label="满减规则：">
          满{{addform.couponCondition}}减{{addform.discount}}
        </el-form-item>
        <el-form-item label="独立优惠券：" prop="aloneType">
          {{addform.aloneType == 1 ? '是' : '否'}}
        </el-form-item>
        <el-form-item label="优惠券有效期：">
          {{addform.validNum}}{{addform.validType|validType}}
        </el-form-item>
        <el-form-item label="使用条件说明：">
          {{addform.conditionDesc || ''}}
        </el-form-item>
        <el-form-item label="兑换起止日期：">
          {{`${addform.startTime}至${addform.endTime}`}}
        </el-form-item>
        <el-form-item label="优惠券兑换码：">
          {{addform.couponNo}}
        </el-form-item>
        <!--todo: 商品信息返回-->
        <el-form-item label="可用商品：">
          <el-table
             v-if="addform.goodsList && addform.goodsList.length"
            :data="addform.goodsList"
            stripe
            size="mini"
            border
            style="width: 100%">
            <el-table-column
              label="产品编号">
              <template #default="{row}">{{row.compassGoods.goodsNumber}}</template>
            </el-table-column>
            <el-table-column
              label="产品名称">
              <template #default="{row}">{{row.compassGoods.goodsName}}</template>
            </el-table-column>
            <el-table-column
              label="规格">
              <template #default="{row}">{{row.goodsStandard.desc}}</template>
            </el-table-column>
            <el-table-column
              label="价格">
              <template #default="{row}">{{row.goodsStandard.price}}</template>
            </el-table-column>
          </el-table>
          <div v-else>无限制</div>
          
        </el-form-item>
        <el-form-item label="备注：">
          {{addform.couponDesc}}
        </el-form-item>
        <el-form-item label="兑换/使用情况：">
          <div style="display: flex;justify-content: space-between; margin-bottom: 10px">
            <div>已兑换{{addform.exchangeNum || 0 }}个，已使用{{addform.useNum || 0}}个</div>
            <div>
              <el-input placeholder="请输入账号/昵称筛选" v-model="keyWord" @input="handleQuery"></el-input>
            </div>
          </div>
          <el-table
            :data="addform.couponLogs.filter(item=>!item.hidden)"
            stripe
            size="mini"
            border
            style="width: 100%">
            <el-table-column
              prop="userName"
              label="用户账号">
            </el-table-column>
            <el-table-column
              prop="nickName"
              label="用户昵称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="couponTime"
              label="兑换时间">
              <template #default={row}> {{row.couponTime | formatDates}}</template>
            </el-table-column>
            <el-table-column
              prop="useTime"
              label="使用时间">
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </el-card>
    <goodsPicker ref="goodsPicker" @selected="res => goodsInfo = res"></goodsPicker>
  </div>
</template>

<script>
  import goodsPicker from "@/components/goodsPicker";
  import {couponGet} from "@/api/system/coupon";
  import {getQueryObject, formatDate} from "@/utils";
  import mixins from "./mixins";
 
  export default {
    components: {
      goodsPicker
    },
    mixins: [mixins],
    data() {
      return {
        addform: {},
        keyWord: ''
      }
    },

    filters: {
      formatDates(value) {
        return formatDate(value)
      }
    },

    mounted() {
      let {id} = getQueryObject()
      this.getInfo(id)
    },

    methods: {
      // 获取信息
      getInfo(id) {
        couponGet(id).then(res => {
          res.data.goodsList.forEach(item => {
            item.goodsStandard = JSON.parse(item.goodsStandard)
          })
          this.addform = res.data
          console.log(res.data)
        })
      },

      handleQuery() {
        this.addform.couponLogs.forEach(item => {
          if (item.nickName.includes(this.keyWord) || item.userName.includes(this.keyWord)) {
            this.$set(item, 'hidden', false)
          } else {
            this.$set(item, 'hidden', true)
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
